<!-- BubbleBrands.vue -->
<template>
  <qh-page-view :title="title" bgColor="transparent">
    <view class="header_img" :style="{ opacity: opacity || 1 }"></view>

    <view style="width: 680rpx" class="search-box flex-cn" @click="toSearchGoods">
      <text class="qh-rt-single qh-rt-a-zu2432 search-icon"></text>
      <text class="search-text">各类礼盒低至4折</text>
      <view class="search-button"></view>
    </view>


    <view class="containerClass">
      <view>
        <scroll-view class="move_scroll-container" scroll-x @touchstart="stopAnimation" @touchend="startAnimation"
          :show-scrollbar="false">
          <view class="move_category-row" :class="{ 'animate': isAnimating }">
            <view v-for="(item, index) in brandList" :key="index" class="move_category-item">
              <image :src="item.image_url" class="move_category-image" mode="aspectFit"
                @click="handleBrandClick(item, index % brandList.length)" />
            </view>
          </view>   
        </scroll-view>
      </view>

      <view style="width: 100%; background-color: #f4dcc8;border: 1px solid #f4dcc8;">
        <view class="bubble-container">
          <view class="bubble_title-box">
            <h1 class="bubble_title">这份挚礼送给？</h1>
          </view>
          <view class="bubble_Bubble_qipao">
            <view v-for="(brand, index) in brands" :key="index" class="bubble_bubble"
              :class="{ bubble_active: brand.isActive }" :style="{  
                top: brand.top + 'rpx',
                left: brand.left + 'rpx',
                width: brand.size + 'rpx',
                height: brand.size + 'rpx',
                backgroundColor: brand.bgColor,
                animationDelay: brand.delay + 's',
                animationDuration: brand.duration + 's',
                transition: 'all 0.3s ease-in-out, background-color 0.5s ease',
              }" @click="handleBubbleClick(index, brand)">
              <view class="bubble_brand-content">
                <view :class="[
                             'bubble_brand-name',
                  brand.textColor,
                  { 'text-white': brand.isActive },
                ]" :style="{
                    fontSize: brand.fontSize + 'rpx',
                    fontWeight: brand.fontWeight || 400,
                  }">{{ brand.name }}</view>
              </view>
            </view>
          </view> 
        </view>
      </view>

      <view class="money_price-container">
        <view class="money_price-title">这份挚礼的价值?</view>
        <view class="money_price-bubbles">
          <view v-for="(price, index) in prices" :key="index" class="money_price-bubble"
            :class="{ 'money_price-active': price.isActive }" @click="handlePriceClick(index)">
            <text>{{ price.range }}</text>  
          </view>
        </view>
      </view>
  
      <giftBox/>
      
      <view class="giftbox-section-title">
          <image
            src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173467531767650b7524efa.png"
            mode="aspectFit"
            class="giftbox-title-img"
          />
        </view>
      <view class="product-container">
        <view v-for="(item, index) in goodsList" :key="index" class="product-item">
          <image :src="item.goods_image" class="product-image" mode="‌aspectFill" @click="toGoodsDetails(item)" />
          <view class="product-info">
            <view class="product-title">{{ item.goods_name }}</view>
            <view class="price-buy-container">
              <view class="price-section">
                <view class="price-stack">
                  <text class="activity-label">活动价</text>
                  <text class="product-price">
                    <text style="font-size: 12px">¥</text>
                    {{ item.online_price }}</text>
                </view>
              </view>
              <view class="buy-button" @click="toGoodsDetails(item)" >
                <text>点击购买</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </qh-page-view>
</template>

<script>
import giftBox from './components/gift_box.vue'
import specialData from './components/mockData.js'

export default { 
  components: {
    giftBox
  },
  name: "BubbleBrands",
  data() {
    return {

      title: "",
      goodsList: [],
      prices: specialData.prices,
      brandList: [],
      brands: specialData.brands,
      scrollLeft: 0,
      scrollWidth: 0,
      timer: null,
      isAnimating: true,
    };
  },

  onLoad() {
    this.onShows();
  },
  methods: {
    async onShows() {
      this.getBrandList()
      this.getGoodsList()
    },
    //品牌
    async getBrandList() {
      const res = await this.$request(
        "SmallProgramApi/NewYear/getBrandList",
        { store_id: this.$store.mallStoreId, merchant_id: 1 }
      );
      console.log('Brand list response:', res.data); // 打印看看返回的数据结构
      this.brandList = res.data;
    },

    //商品
    async getGoodsList() {
      const res = await this.$request(
        "SmallProgramApi/NewYear/getHomePageGoodsList",
        { store_id: this.$store.mallStoreId, merchant_id: 1, }
      );
      console.log(res, "res12321321");

      this.goodsList = res.data
    },


    handleBrandClick(item, index) {
      uni.navigateTo({
        url: `/pages/mer/tabbar/specialDetails/brand_details?brand_id=${item.brand_id}`
      });
      console.log("Brand clicked", item, index);
    },

  
    handleViewMore() {
      uni.navigateTo({
        url: '/pages/mer/tabbar/specialDetails/log_details'
      });
      console.log("View more clicked");
      // 处理查看更多逻辑
    },
    handlePriceClick(index) {
      this.prices = this.prices.map((price, i) => ({
        ...price,
        isActive: i === index,
      }));

      // 添加跳转逻辑
      uni.navigateTo({
        url: `/pages/mer/tabbar/specialDetails/moeny_details?priceRange=${this.prices[index].range}&selectedIndex=${index}`
      });
    },
    getRandomDelay() {
      return Math.random() * 2;
    },
    getRandomDuration() {
      return 5 + Math.random() * 2;
    },
    handleBubbleClick(index, item) {
      this.brands = this.brands.map((brand, i) => ({
        ...brand,
        isActive: i === index,
      }));

      // 获取选中的气泡名称
      const selectedBrand = this.brands[index].name;

      // 构建泡数据数组，将中的设为active
      const bubbleItems = [
        { text: "爱人", active: selectedBrand === "爱人", id: "19" },
        { text: "老人", active: selectedBrand === "老人", id: "20" },
        { text: "亲戚", active: selectedBrand === "亲戚", id: "25" },
        { text: "好友", active: selectedBrand === "好友", id: "26" },
        { text: "孩童", active: selectedBrand === "孩童", id: "18" },
        { text: "合作伙伴", active: selectedBrand === "合作伙伴", id: "24" },
        { text: "领导", active: selectedBrand === "领导", id: "23" },
        { text: "同事", active: selectedBrand === "同事", id: "21" },
        { text: "其他", active: selectedBrand === "其他", id: "22" }
      ];


      // 传递气泡数据 
      // 将数据编码并传递
      const params = encodeURIComponent(JSON.stringify(bubbleItems));
      uni.navigateTo({
        url: `/pages/mer/tabbar/specialDetails/obj_details?bubbleItems=${params}&id=${item.id}&title=${selectedBrand}`
      });
    },
    toSearchGoods() {
      // uni.navigateTo({
      //   url: '/pages/mer/tabbar/specialDetails/search_goods'
      // });
      uni.navigateTo({
        url: "/pages/mer/goods/search/search?search=1",
      });
    },

    toGoodsDetails(item) {

      uni.navigateTo({
        url: "/pages/mer/goods/details/details?id=" + item.id,
      });
    },
    startScroll() {
      if (this.timer) return;
      this.timer = setInterval(() => {
        this.scrollLeft += 1;
        // 当滚动到第一份列表末尾时，重置位置到开头
        if (this.scrollLeft >= this.scrollWidth / 2) {
          this.scrollLeft = 0;
        }
      }, 30); // 调整速度
    },
    stopScroll() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    handleScroll(e) {
      // 记录滚动宽度
      if (!this.scrollWidth) {
        this.scrollWidth = e.detail.scrollWidth;
      }
    },
    stopAnimation() {
      this.isAnimating = false;
    },
    startAnimation() {
      this.isAnimating = true;
    },
    // 生成柔和的随机颜色
    getRandomPastelColor() {
      // 使用较高的基础值来确保颜色偏亮
      const baseValue = 200;
      const range = 55; // 较小的范围以获得柔和的颜色

      const r = baseValue + Math.floor(Math.random() * range);
      const g = baseValue + Math.floor(Math.random() * range);
      const b = baseValue + Math.floor(Math.random() * range);

      // 返回rgba格式以控制透明度
      return `rgba(${r}, ${g}, ${b}, 0.8)`;
    },

    // 修改现有的 getRandomDelay 方法下方添加
    getRandomColor() {
      const colors = [
        'rgba(255, 244, 230, 0.9)', // 浅橙色
        'rgba(248, 240, 229, 0.9)', // 米色
        'rgba(232, 244, 248, 0.9)', // 浅蓝色
        'rgba(240, 248, 237, 0.9)', // 浅绿色
        'rgba(255, 240, 240, 0.9)', // 浅粉色
        'rgba(245, 230, 255, 0.9)', // 浅紫色
        'rgba(255, 235, 205, 0.9)', // 浅黄色
        'rgba(230, 255, 250, 0.9)', // 浅青色
      ];
      return colors[Math.floor(Math.random() * colors.length)];
    },

    refreshColors() {
      this.brands = this.brands.map(brand => ({
        ...brand,
        bgColor: this.getRandomColor()
      }));
    },
  },
  mounted() {
    this.startScroll();
    // 每隔一段时间刷新颜色
    setInterval(() => {
      this.refreshColors();
    }, 5000); // 每5秒刷新一次颜色
  },
  beforeDestroy() {
    this.stopScroll();
  },
};
</script>
  
<style lang="scss">
.header_img {
  position: fixed;
  height: calc(1154rpx + var(--safe-area-top, 20px));
  width: 100%;
  background-image: url("https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173379441767579a7111267.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transition: opacity 1s;
  left: 0;
  top: 0;
}


.giftbox-section-title {
padding-bottom: 20rpx;
background-color: #fff;
}


.giftbox-title-img {
width: 100%;
height: 80rpx;
/* 根据实际图片调整高度 */
}


.search-box {
  position: sticky;
  top: 0;
  margin: 0 auto;
  margin-bottom: 16rpx;
  width: 680rpx;
  border: 1px solid rgba(255, 255, 255, 0.3);
  height: 66rpx;
  border-radius: 34rpx;
  padding-left: 10rpx;
  box-sizing: border-box;
  line-height: 32rpx;
  display: flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);

  .search-icon {
    font-size: 28rpx;
    color: #fff;
    margin-left: 12rpx;
  }

  .search-text {
    font-size: 28rpx;
    color: #fff;
    margin-left: 12rpx;
  }

  .search-button {
    color: rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    height: 56rpx;
    width: 122rpx;
    line-height: 56rpx;
    margin-left: auto;
    text-align: center;
    font-size: 28rpx;
  }
}
</style>


<style lang="scss" scoped>

.containerClass {
  position: relative;
  z-index: 2;
  padding-top: calc(880rpx + var(--status-bar-height));
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
}

.bottom-message {
  color: #ccc;
  font-size: 24rpx;
  // background-color: #fff;
  width: 100%;
  padding: 10rpx 0;
}

.line {
  width: 40%;
  height: 1px;
  background-color: #ccc;
}

.scroll-view {
  //     background: linear-gradient(180deg, #ffffff 0%, #f8f8f8 100%);
  background: #f0f2ee;
}

.product-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28rpx;
  padding: 32rpx;
  background-color: #fff;
  // padding-bottom: env(safe-area-inset-bottom);
}

.product-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  padding: 12px;
  position: relative;
  min-height: 213px;
  background-image: url("https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173379450967579acd8dd34.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.product-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.product-image {
  width: 264rpx;
  height: 212rpx;
  border-radius: 8px;
  position: relative;
  z-index: 2;
}

.product-info {
  padding: 8px 0;
  position: relative;
  z-index: 2;
}

.product-title {
  font-size: 14px;
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  line-height: 1.3;
  color: #794628;
  width: 100%;
  max-width: 100%;
  min-height: calc(14px * 1.3);
  max-height: calc(14px * 1.3 * 2);
  box-sizing: border-box;
  // padding-right: calc(100% - (14px * 8));
}

.price-buy-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-section {
  display: flex;
  align-items: flex-end;
  flex: 1;
  min-width: 0;
}

.price-stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.activity-label {
  font-size: 10px;
  color: #e06b6b;
  line-height: 1;
  margin-bottom: 2px;
}

.product-price {
  color: #d13e3e;
  font-size: 28rpx;
  font-weight: bold;
  line-height: 1;
}

//按钮
.buy-button {
  width: 82px;
  height: 32px;
  background: linear-gradient(148deg, #db5656 0%, #c41f1f 100%);
  border-radius: 16px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  z-index: 10;

  text {
    z-index: 12;
    font-size: 28rpx;
    color: #f9ddb3;
    line-height: 32px;
    text-align: center;
  }

  &::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(125deg,
        rgba(224, 184, 121, 1),
        rgba(249, 221, 179, 1),
        rgba(234, 189, 156, 1));
    border-radius: 18px;
    z-index: -1;
  }

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    border-radius: 16px;
    z-index: 0;
  }
}
</style>

<style lang="scss" scoped>
// .giftbox-gift-section {
//   max-width: 750rpx;
//   margin: 0 auto;
//   padding: 20rpx;
//   background-color: #fff;
// }

// .giftbox-section-title {
//   margin-bottom: 20rpx;
// }

// .giftbox-title-img {
//   width: 100%;
//   height: 80rpx;
//   /* 根据实际图片调整高度 */
// }

// .giftbox-category-list {
//   display: flex;
//   flex-direction: column;
//   gap: 30rpx;
// }

// .giftbox-category-item {
//   position: relative;
//   height: 244rpx;
//   overflow: hidden;
// }

// .giftbox-category-img {
//   width: 100%;
//   height: 100%;
// }

// .giftbox-category-text {
//   position: absolute;
//   left: 40rpx;
//   bottom: 40rpx;
//   color: white;
// }

// .giftbox-category-text .giftbox-title {
//   font-size: 48rpx;
//   display: block;
// }

// .giftbox-category-text .giftbox-subtitle {
//   font-size: 32rpx;
//   display: block;
//   margin-top: 10rpx;
// }

// .giftbox-category-item.giftbox-last {
//   height: 244rpx;
// }

// .giftbox-view-more {
//   display: flex;
//   justify-content: center;
//   flex-direction: column;
//   text-align: center;
//   color: #666;
// }

.money_price-container {
  padding: 30rpx;
  background-color: #f4dcc8;
}

.money_price-title {
  text-align: center;
  font-size: 48rpx;
  color: #e67624;
  font-weight: bold;
  margin-bottom: 40rpx;
}

.money_price-bubbles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30rpx;
  padding: 0 20rpx;
}




.money_price-bubble {
  height: 140rpx;
  width: 140rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 30%,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.9) 50%,
      rgba(255, 255, 255, 0.8) 100%);
  border-radius: 50%;
  font-size: 28rpx;
  color: #333;
  cursor: pointer;
  margin: 0 auto;
  padding: 10rpx;
  transform-style: preserve-3d;
  perspective: 1000rpx;
  transition: all 0.3s ease;
  box-shadow:
    inset -8rpx -8rpx 12rpx rgba(0, 0, 0, 0.1),
    inset 8rpx 8rpx 12rpx rgba(255, 255, 255, 0.8),
    4rpx 4rpx 15rpx rgba(0, 0, 0, 0.15);
  -webkit-tap-highlight-color: transparent;
  user-select: none;

  text {
    text-align: center;
    width: 100%;
    line-height: 1.2;
    word-break: break-word;
    padding: 0 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &:active {
    background: radial-gradient(circle at 30% 30%,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.8) 50%,
        rgba(255, 255, 255, 0.7) 100%);
    transform: scale(0.98);
  }
}
  .money_price-active {
    background: radial-gradient(circle at 30% 30%,
        #fbeee5 0%,
        #e67624 60%,
        #d65e15 100%) !important;
    color: #ffffff;
    transform: translateZ(30rpx) scale(1.05);
    box-shadow:
      inset -8rpx -8rpx 12rpx rgba(0, 0, 0, 0.2),
      inset 8rpx 8rpx 12rpx rgba(255, 255, 255, 0.1),
      4rpx 4rpx 15rpx rgba(230, 118, 36, 0.4);
    text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.2);

    // 添加脉冲动画
    animation: pulse 2s infinite;
  }

  // 加脉冲动画
  @keyframes pulse {
    0% {
      transform: translateZ(30rpx) scale(1.05);
    }

    50% {
      transform: translateZ(40rpx) scale(1.08);
    }

    100% {
      transform: translateZ(30rpx) scale(1.05);
    }
  }

  // 优化价格容器
  .money_price-bubbles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30rpx;
    padding: 0 20rpx;
    perspective: 1000rpx; // 为整个容器添加透视效果
  }

  // 优化标题

  
  .move_scroll-container {
    width: 100%;
    overflow: hidden;
    background-color: #f4dcc8;
    position: relative;
  }

  .move_category-row {
    display: flex;
    padding: 20rpx 0;
    gap: 30rpx;
    padding-left: 10px;

    &.animate {
      animation: scrolling 20s linear infinite;
    }
  }

  @keyframes scrolling {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(-50%);
    }
  }

  .move_category-item {
    box-shadow: 6rpx 6rpx 4rpx 0rpx rgba(0, 0, 0, 0.3);
    flex: 0 0 150rpx;
    height: 150rpx;
    background: #f9f9f9;
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      cursor: pointer;
    }
  }

  .move_category-image {
    width: 132rpx;
    height: 132rpx;
  }

  .bubble_Bubble_qipao {
    position: absolute;
    top: 75rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 750rpx; // 设置最大宽度
    background-color: #f4dcc8;
  }

  .bubble-container {
    position: relative;
    width: 100%;
    height: 450rpx;
    background-color: #f4dcc8;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .bubble_title-box {
    text-align: center;
    padding: 20rpx;
    border-radius: 10rpx;
    background-color: #f4dcc8;
  }

  .bubble_title {
    color: #e67624;
    font-size: 48rpx;
    font-weight: 600;
  }

  .bubble_subtitle {
    color: #3d3d3d;
    font-size: 28rpx;
    padding: 10rpx;
  }

  .bubble_bubble {
    position: absolute;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
      inset -8rpx -8rpx 12rpx rgba(0, 0, 0, 0.1),
      inset 8rpx 8rpx 12rpx rgba(255, 255, 255, 0.8),
      4rpx 4rpx 10rpx rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    animation: float 3s ease-in-out infinite;
    transform-origin: center;
    transform-style: preserve-3d;
    perspective: 1000rpx;

    &:hover {
      transform: translateY(-3rpx) translateZ(20rpx);
      box-shadow:
        inset -8rpx -8rpx 12rpx rgba(0, 0, 0, 0.1),
        inset 8rpx 8rpx 12rpx rgba(255, 255, 255, 0.8),
        8rpx 8rpx 20rpx rgba(0, 0, 0, 0.2);
    }
  }

  .bubble_active {
    background: radial-gradient(circle at 30% 30%,
        #fbeee5 0%,
        #e67624 60%,
        #d65e15 100%) !important;
    box-shadow:
      inset -8rpx -8rpx 12rpx rgba(0, 0, 0, 0.2),
      inset 8rpx 8rpx 12rpx rgba(255, 255, 255, 0.1),
      4rpx 4rpx 15rpx rgba(230, 118, 36, 0.4);
    transform: translateZ(30rpx);
  }

  .text-white {
    color: #ffffff !important;
  }

  @keyframes float {

    0%,
    100% {
      transform: translateY(0) translateZ(0) rotateX(0deg);
    }

    50% {
      transform: translateY(-30rpx) translateZ(20rpx) rotateX(5deg);
    }
  }

  .bubble_brand-content {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .bubble_brand-name {
    line-height: 1.3;
    margin-bottom: 2rpx;
    text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.1);
    transform: translateZ(10rpx);
  }

  .text-green {
    color: #00843d;
  }

  .text-#F4DCC8 {
    color: #e60012;
  }

  .text-blue {
    color: #0066cc;
  }

  .text-cyan {
    color: #00a0e9;
  }

  .text-black {
    color: #333333;
  }

  .text-orange {
    color: #ff6600;
  }

  @media screen and (max-width: 375px) {
    .bubble_Bubble_qipao {
      transform: translateX(-50%) scale(0.9);
    }
  }

  @media screen and (max-width: 320px) {
    .bubble_Bubble_qipao {
      transform: translateX(-50%) scale(0.8);
    }
  }

  /* iPad Media Query */
  @media screen and (min-width: 768px) and (max-width: 1024px) {
    .bubble_Bubble_qipao {
      transform: translateX(-50%) scale(1.5);
      top: 150rpx;
    }

    .bubble_bubble {
      transform-origin: center;
    }

    .bubble_title {
      font-size: 72rpx;
    }

    .bubble_subtitle {
      font-size: 36rpx;
    }
  }
</style>

<style lang="scss" scoped>
// 使用 :deep() 深度选择器
:deep(.qh-page-view) {
  .qh-page-view-content {
    background-color: #ffffff !important;
  }
}

// 或者使用 ::v-deep (旧语法，但兼容性更好)
::v-deep .qh-page-view {
  .qh-page-view-content {
    background-color: #ffffff !important;
  }
}
</style>